!!!5
html(ng-app='AbnTest')
	head


		///
		// Bootstrap 2 or Bootstrap 3 ?
		//
		if bs == "2"
			link(rel="stylesheet",href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css")
		if bs == "3"
			link(rel="stylesheet",href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css")


		//
		// Angular 1.1.5 or 1.2.12 ?
		//
		if ng == "1.1.5"
			script(src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js")
		if ng == "1.2.12"
			script(src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js")
			script(src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-animate.js")


		// Font Awesome (optional)
		//- link(href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css",rel="stylesheet")
		//- link(href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css",rel="stylesheet")


		// Live Reload ( for development )
		//- script(src="http://localhost:35729/livereload.js")


		///
		// abn-tree ( the thing we are testing )
		//
		script(src="../dist/abn_tree_directive.js")		
		link(rel='stylesheet',href='../dist/abn_tree.css')


		// js for this test page:
		script(src="test_page.js")


		
	body(
		ng-controller='AbnTestController'
		style="margin:20px"
		)

		h2 angular-bootstrap-nav-tree
		table
			tr
				td(style='vertical-align:top;padding:20px')
					//- Left Side

					h6 by Nick Perkins
					a(href='https://github.com/nickperkinslondon/angular-bootstrap-nav-tree') The code is on Github


					// All 4 of these pages are generated ( by Grunt ) 
					// from this one jade file
					hr

					ul.nav.nav-list.list-group
						li
							a(href='bs2_ng115_test_page.html') Bootstrap 2 / Angular 1.1
						li
							a(href='bs3_ng115_test_page.html') Bootstrap 3 / Angular 1.1
						li
							a(href='bs2_ng120_test_page.html') Bootstrap 2 / Angular 1.2
						li
							a(href='bs3_ng120_test_page.html') Bootstrap 3 / Angular 1.2

				td(style='vertical-align:top')
					//- Right Side


					hr
					h4 Bootstrap #{bs}
					h4 Angular #{ng}
					hr


					table
						tr
							td(style='vertical-align:top')

								br	
								button.btn.btn-default.btn-sm(
									ng-click="try_changing_the_tree_data()"
									) Change The Tree Definition

								br	
								button.btn.btn-default.btn-sm(
									ng-click="try_async_load()"
									) Load Tree Data Asynchronously

								hr
								h5 Test the Tree Control API:

								br
								button.btn.btn-default.btn-sm(
									ng-click='my_tree.select_first_branch()'
									) First Branch
								br
								button.btn.btn-default.btn-sm(
									ng-click='my_tree.select_next_sibling()'
									) Next Sibling
								
								button.btn.btn-default.btn-sm(
									ng-click='my_tree.select_prev_sibling()'
									) Prev Sibling

								br
								button.btn.btn-default.btn-sm(
									ng-click='my_tree.select_next_branch()'
									) Next Branch

								
								button.btn.btn-default.btn-sm(
									ng-click='my_tree.select_prev_branch()'
									) Prev Branch

								br
								button.btn.btn-default.btn-sm(
									ng-click='my_tree.select_parent_branch()'
									) Parent

								hr
								button.btn.btn-default.btn-sm(
									ng-click='my_tree.expand_branch()'
									) Expand

								button.btn.btn-default.btn-sm(
									ng-click='my_tree.collapse_branch()'
									) Collapse

								button.btn.btn-default.btn-sm(
									ng-click='my_tree.expand_all()'
									) Expand All

								button.btn.btn-default.btn-sm(
									ng-click='my_tree.collapse_all()'
									) Collapse All

								hr
								button.btn.btn-default.btn-sm(
									ng-click='try_adding_a_branch()'
									) Add Branch



							td(style='vertical-align:top')
								div(
									style='width:250px;margin-left:100px;background:whitesmoke;border:1px solid lightgray;border-radius:5px;'
									)

									span(ng-if='doing_async') ...loading...
									
									abn-tree(
										tree-data         = "my_data"
										tree-control      = "my_tree"
										on-select         = "my_tree_handler(branch)"
										expand-level      = "2"
										initial-selection = "Granny Smith"
										)

							td(style="padding:20px;vertical-align:top;")
								.alert.alert-warning(
									style="width:300px"
									) {{ output }}
